<template>
    <div class="boxs">
        <van-nav-bar title="相似商品" left-text="首页" right-text="搜索" left-arrow @click-left="router.push({ name: 'admin' })"
            @click-right="router.push({ name: 'founding' })" />

        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="lists" :immediate-check="false">
            <van-cell v-for="item in store.DataList" :key="item.proid">
                <template #default>
                    <div class="liBox" @click="clickBox(item.proid)">
                        <img :src="item.img1" v-lazy="item.img1">
                        <van-text-ellipsis :content="item.proname" :rows='2' />
                        <div style="color:red">￥{{ item.originprice }}</div>
                    </div>
                </template>
            </van-cell>
        </van-list>
        <van-back-top />
    </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount,onUnmounted } from 'vue'
import { useRouter } from 'vue-router';
import { usefounded } from '../store/founded'
import { usefound } from '@/store/found';

const store = usefounded();
const founds = usefound();
const data = ref('')
let loading = ref(false);
// let finished = ref(false);
let finished = ref(false)

let router = useRouter();

onBeforeMount(async() => {
    await store.fetchData();

})
onUnmounted(()=>{
    store.removes();
})
let onLoad = async () => {
    console.log('load');
    await store.fetchData();
    loading.value = false;
    finished.value = store.flag

}
const clickBox = (id: string) => {
    router.push(`/detail/${id}`)
}
</script>

<style lang="scss">
.boxs{
    background-color:#eff2f5 ;
}
.lists {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    justify-content: space-between;
}

.lists .van-cell {
    width: 48%;
    height: 300px;
    margin-top: 10px;
}

.liBox {
    padding: 5px;
    box-sizing: border-box;
    text-align: left;
}

.liBox img {
    width: 100%;
    height: 150px;
    margin-bottom: 30px;
}
</style>